<template>
	<view ref="container">
		<div class="coupon-list" v-if="couponsList.length > 0">
			<div class="item acea-row row-center-wrapper" v-cloak v-for="(item, index) in couponsList" :key="index">
				<div class="money"
					:class="[item._type === 0 ? 'moneyGray' : '',{blue:item.couponType==2},{green:item.couponType==3}]">
					<div>
						￥<span class="num">{{ item.couponPrice }}</span>
					</div>
					<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
				</div>
				<div class="text">
					<div class="condition line1" style="position: relative;">
						{{ item.couponTitle }}
						<view v-if="item.couponType==2||item.couponType==3" class="tag bg-color-red"
							:class="[item._type === 0 ? 'moneyGray' : '',{blue:item.couponType==2},{green:item.couponType==3}]">
							{{quanName(item.couponType)}}</view>
							
							<view class="tag bg-color-red blue tag-share" 
							
	v-if="item.couponType==3&&item.puid==null&&item._msg=='可使用'" @click="shareUrl(item)">分享</view>
					</div>
					<div class="data acea-row row-between-wrapper">
						<div v-if="item.endTime === 0">不限时</div>
						<div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
						<div class="bnt gray" v-if="item._type === 0">{{ item._msg }}</div>
						<template v-else>
							<div class="bnt bg-color-red blue" v-if="item.couponType==2" @click="useCoupon(item)">点击使用
							</div>
							<div class="bnt bg-color-red green" v-else-if="item.couponType==3" @click="useCoupon(item)">
								点击使用</div>
							<div class="bnt bg-color-red" v-else>{{ item._msg }}</div>
						</template>

					</div>
				</div>
			</div>
		</div>
		<!--暂无优惠券-->
		<view class="noCommodity" v-if="couponsList.length === 0 && loading === true">
			<view class="noPictrue">
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
			</view>
		</view>

		<view v-show="showQR" class="box">
			<view class="box-title">{{title}}</view>
			<view class="qr-box">
				<canvas id="qrcode" :class="{disabledQr:disabled}" canvas-id="qrcode"
					style="width: 280px;height: 280px;margin: 0 auto;"></canvas>
				<view v-if="disabled" class="qr-tips">二维码已失效</view>
			</view>
			<view @click="reloadQR" class="reloadQR" v-if="reload">刷新二维码</view>
			<view class="reloadQR" v-else>可截图分享二维码</view>
			<view style="margin-top: 15px;"><button type="primary" @click="close"
					style="background-color: #1890ff;">关闭</button></view>
		</view>

		<view v-show="showLink" class="box" style="height: 220px;bottom: calc(50% - 110px);">
			<view class="box-title">复制链接</view>
			<view>
				<view style="padding: 0 10px;border: 1px solid #ccc;margin-bottom: 10px;">
					<input v-model="linkValue" style="height: 40px;" />
				</view>
				<button @click="copyLink">复制连接</button>
			</view>
			<view style="margin-top: 15px;"><button type="primary" @click="close"
					style="background-color: #1890ff;">关闭</button></view>
		</view>

	</view>
</template>
<script>
	import {
		getCouponsUser
	} from '@/api/user'
	import DataFormatT from '@/components/DataFormatT'
	import UQRCode from 'uqrcodejs';
	import {
		qrCodeSign
	} from '@/config/setting';
	import {
		getCouponsTemp
	} from '@/api/couponqr';

	import {
		share
	} from '@/api/share';

	const NAME = 'UserCoupon'

	let time = -1;
	export default {
		name: 'UserCoupon',
		components: {
			DataFormatT,
		},
		props: {},
		data: function() {
			return {
				linkValue: "",


				couponsList: [],
				loading: false,
				showQR: false,
				showLink: false,
				nowBrightness: 1,
				tempId: "",
				disabled: false,
				interval: null,
				reload: 0,
				title: "",
				type: "",
			}
		},
		watch: {
			$yroute: function(n) {
				var that = this
				if (n.name === NAME) {
					that.getUseCoupons()
				}
			},
		},
		mounted: function() {
			this.getUseCoupons()
		},
		created() {
			this.interval = setInterval(() => {
				if (this.type == 2) {
					//停车券才需要过期
					if (time > 0) {
						time -= 1;
						console.log(time, "倒计时");
					} else if (time == 0) {
						this.disabled = true
					}
				}


			}, 1000)
		},
		onUnload() {
			this.setTime0();
		},
		methods: {
			quanName(type) {
				return {
					"2": "停车券",
					"3": "定向卷"
				} [type];
			},
			styleClass(item) {
				return [item._type === 0 ? 'moneyGray' : '', {
					blue: item.couponType == 2
				}, {
					green: item.couponType == 3
				}];
			},
			setTime0() {
				time = -1
				clearInterval(this.interval);
			},
			showLoading() {
				uni.showLoading({
					title: "请稍候"
				})
			},
			hideLoading() {
				uni.hideLoading();
			},
			useCoupon(item) {
				let id = item.id
				let title = item.couponTitle
				let type = item.couponType
				this.type = type

				let str = "当前二维码ID:" + id
				console.log(str);
				this.tempId = id;
				this.title = title
				this.showLoading();
				this.reloadQR()
				

			},
			shareUrl(item){
				this.showLink = true;
				let id = item.id
				this.showLoading();
				getCouponsTemp(id).then(res => {
					let newId = res.data.id;
					console.log(newId,"虚拟id");
					share(newId).then(e => {
						if (e.status == 200) {
							let data = e.data
							let json = JSON.parse(data);
							this.linkValue = json.openlink
						
							this.hideLoading();
						}
						console.log(e)
					})
				})
			},
			copyLink(){
					uni.setClipboardData({
									data: this.linkValue,
									success: () => {
										uni.showToast({
											icon: 'none',
											title: '复制成功'
										});
									}
								});
			},
			reloadQR() {
				var id = this.tempId
				this.showQR = true;
				this.showLoading();
				this.disabled = false;
				getCouponsTemp(id).then(res => {
					time = 60;
					this.hideLoading();
					let newId = res.data.id;
					let reload = res.data.reload;

					this.reload = reload
					let data = {
						type: qrCodeSign,
						id: newId
					}
					let str = JSON.stringify(data);
					this.drawQRcode(str);
					this.setHigh(true);
				})
			},
			setHigh(flag) {
				//#ifndef H5 
				if (flag) {
					uni.getScreenBrightness({
						success: function(res) {
							console.log('屏幕亮度值：' + res.value);
						}
					});
					uni.setScreenBrightness({
						value: 1,
						success: function() {
							console.log('success');
						}
					});
				} else {
					uni.setScreenBrightness({
						value: this.nowBrightness,
						success: function() {
							console.log('success');
						}
					});
				}
				//#endif 
			},
			close() {
				time = -1
				this.showQR = false;
				this.showLink = false;
				this.setHigh(false);
			},
			drawQRcode(str) {
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = str;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 280;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			getUseCoupons: function() {
				let that = this,
					type = 0
				getCouponsUser(type).then(res => {
					that.couponsList = res.data
					that.loading = true
				})
			},
		},
	}
</script>

<style scoped>
	.tag-share{
		position: absolute;
		right: 0px;
		top:5px;
		eight: 20px;
		line-height: 15px;
		background-color: #c2c2c2 !important;
		color: #4e4e4e !important;
	}
	.disabledQr {
		filter: brightness(0.5);
	}

	.qr-box {
		position: relative;
	}

	.qr-tips {
		position: absolute;
		left: 0;
		color: white;
		top: calc(50% - 10px);
		font-weight: bold;
		width: 100%;
		text-align: center;
	}

	.reloadQR {
		font-size: 14px;
		text-align: center;
		color: gray;
		margin-top: 10px;
	}

	.box-title {
		margin-bottom: 10px;
		font-size: 18px;
		padding: 0 10px;
	}

	.box {
		position: fixed;
		bottom: calc(50% - 200px);
		left: calc(50% - 160px);
		width: 320px;
		height: 430px;
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 1px 1px 14px #0000002b;
	}

	.blue {
		filter: hue-rotate(225deg);
	}

	.green {
		filter: hue-rotate(140deg);
	}

	.tag {
		font-size: 10px;
		display: inline;
		color: white;
		padding: 2px 5px;
		border-radius: 5px;
		margin-left: 5px;
	}

	.moneyGray {
		background-color: #ccc !important;

	}
</style>
